<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现 MyFormData</title>
</head>

<body>
    <h1>实现 MyFormData</h1>

    <script>
        function MyFormData() {
            // 用来保存每一组键值对信息
            // 键为字符串 值为数组（可能会有多个值）
            this.map = {}
        }

        // 添加键值对，不会覆盖
        MyFormData.prototype.append = function (key, value) {
            // 如果不存在这个键，则设置为空数组
            if (!this.map[key]) {
                this.map[key] = []
            }
            // 将值保存在数组中
            this.map[key].push(value)
        }

        // 设置属性，会覆盖
        MyFormData.prototype.set = function (key, value) {
            // 直接用数组替换，数组中只有一个最新的值
            this.map[key] = [value]
        }

        // 获取属性对应的第一个值
        MyFormData.prototype.get = function (key) {
            // 如果这个 key 没有对应的值，返回 null
            if (!this.map[key] || !this.map[key].length) {
                return null
            }

            // 返回这个 key 对应值的第一个
            return this.map[key][0]
        }


        // 获取属性所有值
        MyFormData.prototype.getAll = function (key) {
            // 如果这个 key 没有对应的值，返回 null
            if (!this.map[key] || !this.map[key].length) {
                return null
            }

            // 返回这个 key 对应的所有值
            return this.map[key]
        }

        // 删除键值对
        MyFormData.prototype.delete = function (key) {
            // 删除这个 key 对应的所有值
            delete this.map[key]
        }

        // ---- 实现 toString 方法，用于方便自己调试 （不必实现）----
        MyFormData.prototype.toString = function() {
            console.log(JSON.stringify(this.map, null, 2))
        }

        // 实现所有功能后，需满足以下条件
        const formData = new MyFormData()

        formData.append('name', 'Jack')
        formData.append('name', 'Mary')


        formData.get('name') // 'jack'
        formData.getAll('name') // ['jack' 'mary']

        formData.set('name', 'Snack')
        formData.get('name') // 'Snack'

        formData.delete('name')
        formData.get('name') // null
    </script>
</body>

</html>